import React, { Component } from 'react';
import PubSub from 'pubsub-js';
import axios from 'axios';

class Search extends Component {
    // 受控组件写法
    state = {
        keyword: ''
    };

    handleChange = (e) => {
        this.setState({ keyword: e.target.value });
    }

    search = async () => {
        // Search组件发布消息

        const { keyword } = this.state;

        // 按下搜索时, 更改List的状态
        PubSub.publish('updateList', { isWelcome: false, isLoading: true });

        // 发送网络请求, 请求地址:https://api.github.com/search/users?q=xxx
        // 需要avatar_url头像 html_url主页地址 login用户名
        /* 未优化版本
        fetch(`https://api.github.com/search/users?q=${keyword}`).then(
            response => {
                console.log('连接服务器成功');
                return response.json();
            },
            // error => { 
            //     console.log('连接服务器失败');
            //     // 在此处处理失败时, 失败返回undefine, 还会继续执行下一个then的response, 所以需要返回新promise对象
            //     // return new Promise;
            // }
        ).then(
            response => { 
                console.log('获取数据成功', response); 
            }
        ).catch(
            error => { console.log('请求出错', error); }
        )
         */

        // 异步优化版本
        try {
            const response = await fetch(`https://api.github.com/search/users?q=${keyword}`);
            const data = await response.json();
            PubSub.publish('updateList', {isLoading: false, users: data.items});
        } catch (error) {
            console.log('请求出错', error);
            PubSub.publish('updateList', {isLoading: false, err: error.message});
        }

    }

    /*     search = () => {
            // Search组件发布消息
    
            // const {keyWordNode:{value}} = this; 嵌套解构
            // const {value: keyword} = this.keyWordNode; 解构的重命名
            const { keyWordNode: {value: keyword }} = this; //结合
            
            // 按下搜索时, 更改List的状态
            PubSub.publish('updateList', {isWelcome: false, isLoading: true});
    
            // 发送网络请求, 请求地址:https://api.github.com/search/users?q=xxx
            // 需要avatar_url头像 html_url主页地址 login用户名
            axios.get(`https://api.github.com/search/users?q=${keyword}`).then(
                response => {
                    // 请求成功后, List更新状态
                    PubSub.publish('updateList', {isLoading: false, users: response.data.items});
                },
                error => { 
                    PubSub.publish('updateList', {isLoading: false, err: error.message});
                 }
            );
        } */

    render() {
        return (
            <section className="jumbotron">
                <h3 className="jumbotron-heading">Search Github Users</h3><br />
                <div>
                    <input onChange={this.handleChange} type="text" placeholder='Enter the name you search' />
                    <button onClick={this.search}>Search</button>
                </div>
            </section>
        );
    }
}

export default Search;